<template>
  <div class="main-header">
    <div class="header-left">
      <el-button type="small" icon="el-icon-menu" @click="changeIscollapse"></el-button>
      <!-- 面包屑 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/main/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="current-time">当前时间:{{ currentTime }}</div>
    <!-- 头像部分 -->
    <el-dropdown @command="handleCommand">
      <!-- <span class="el-dropdown-link">  </span> -->
      <div class="userInfo">
        <el-avatar
          size="small"
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        ></el-avatar>
        <span class="username">王东阳</span>
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
        <el-dropdown-item command="exit">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import axios from "axios";
import { mockWeatherData, simulateNetworkDelay } from "@/service/mockData";
export default {
  props: {},
  components: {},
  data() {
    return {
      currentTime: "",
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getCurrentTime();
    this.getWeather();
  },
  // 清除定时器
  beforeDestroy() {
    clearInterval(this.currentTime);
  },
  methods: {
    ...mapMutations(["changeIscollapse"]),
    // isCollapse() {
    //   console.log("点击了折叠按钮");
    // },

    //实时更新当前时间 时间格式如:2020年12月12日 12:12:12
    // getCurrentTime() {
    //   setInterval(() => {
    //     let date = new Date();
    //     let year = date.getFullYear();
    //     let month = date.getMonth() + 1;
    //     let day = date.getDate();
    //     let hours = date.getHours();
    //     let minutes = date.getMinutes();
    //     let seconds = date.getSeconds();
    //     this.currentTime = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
    //   }, 1000);
    // },

    //方式二 使用moment.js
    getCurrentTime() {
      setInterval(() => {
        this.currentTime = this.$moment().format("YYYY-MM-DD HH:mm:ss");
      }, 1000);
    },
    //移出定时器

    handleCommand(command) {
      //   this.$message("click on item " + command);
      console.log(command);
      if (command === "exit") {
        console.log("退出登录事件");
      } else {
        console.log("个人中心");
        //跳转到个人中心页面,并传参
        // this.$router.push({ path: "/main/userInfo", query: { name: "王东阳" } });
        this.$router.push("/largeScreen");
      }
    },
    //获取天气
    getWeather() {
      // 使用代理路径
      axios
        .get("/weather2/api/weather/GetWeather")
        .then((res) => {
          console.log("天气数据:", res.data);
        })
        .catch((err) => {
          console.error("获取天气失败，使用模拟数据:", err);
          // 使用模拟数据
          simulateNetworkDelay(mockWeatherData).then((data) => {
            console.log("模拟天气数据:", data);
          });
        });
    },
  },
};
</script>

<style scoped lang="less">
.main-header {
  display: flex;

  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  //   background-color: #fff;
  .header-left {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .el-breadcrumb {
    margin-left: 20px;
  }
  .el-dropdown {
    // align-self: flex-end;
    justify-self: flex-end;
    .userInfo {
      display: flex;
      align-items: center;
      .username {
        margin-left: 10px;
      }
    }
  }
}
</style>
